<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <title>我的首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="assets/iconfont/iconfont.css" />
    <link rel="stylesheet" href="assets/swiper/css/swiper.css" />
    
    <script src="assets/jquery/jquery-3.2.1.min.js"></script>
    <script src="assets/flexible/flexible.debug.js"></script>
</head>
<body>
    
    
    <!-- 热卖商品 -->
    <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide one" >
                    <header class="header">
                        <h3>满易行</h3>
                        <a class="iconfont icon-dianhua left" style="font-size: 32px; color: white;"></a>
                    </header>
                    <figure class="banner">
                        <img src="images/1_1.png" />
                    </figure>
                    <section class="column">
                        <section class="left">
                            <section class="top">
                                <a href="html/wallet.html">
                                    <dl>
                                        <dt><img src="images/1_2.png"/></dt>
                                        <dd>ETC充值圈存</dd>
                                    </dl>
                                </a>
                            </section>
                            <section class="bot">
                                <a href="#">
                                    <dl>
                                        <dt><img src="images/1_3.png"/></dt>
                                        <dd>高速通行费及<br />油费估算</dd>
                                    </dl>
                                </a>
                            </section>
                        </section>
                        <section class="right">
                            <section class="top">
                                <a href="#">
                                    <dl>
                                        <dt><img src="images/1_4.png"/></dt>
                                        <dd>晒图有奖</dd>
                                    </dl>
                                </a>
                            </section>
                            <section class="cen">
                                <a href="#">
                                    <dl>
                                        <dt><img src="images/1_5.png"/></dt>
                                        <dd>大型车违章</dd>
                                    </dl>
                                </a>
                            </section>
                            <section class="bot">
                                <a href="html/share.html">
                                    <dl>
                                        <dt><img src="images/1_6.png"/></dt>
                                        <dd>邀请好友</dd>
                                    </dl>
                                </a>
                            </section>
                        </section>
                    </section>
                </div>
                <div class="swiper-slide two" style="height: 100vh">
                    <header class="header">
                        <h3>助手</h3>
                    </header> 
                    <ul class="uls">
                        <li>
                            <section class="left">
                                <img src="images/4_1.png">
                            </section>
                            <section class="center">
                                高速通行费及油价估算
                            </section>
                            <section class="right">
                                <i class="iconfont icon-gengduo1" style="color: #000"></i>
                            </section>
                            <a href="#"></a>
                        </li>
                        <li>
                            <section class="left">
                                <img src="images/4_2.png">
                            </section>
                            <section class="center">
                                消费细明
                            </section>
                            <section class="right">
                                <i class="iconfont icon-gengduo1" style="color: #000"></i>
                            </section>
                            <a href="#"></a>
                        </li>
                        <li>
                            <section class="left">
                                <img src="images/4_3.png">
                            </section>
                            <section class="center">
                                实时路况
                            </section>
                            <section class="right">
                                <i class="iconfont icon-gengduo1" style="color: #000"></i>
                            </section>
                            <a href="#"></a>
                        </li>
                        <li>
                            <section class="left">
                                <img src="images/4_4.png">
                            </section>
                            <section class="center">
                                加油卡
                            </section>
                            <section class="right">
                                <i class="iconfont icon-gengduo1" style="color: #000"></i>
                            </section>
                            <a href="#"></a>
                        </li>
                    </ul>

                </div>
                <div class="swiper-slide three" style="height: 100vh">
                    <section class="top">
                        <section class="logo">
                            <div class="left">
                                <img src="images/3_1.png">
                            </div>
                            <div class="center">
                                <p>张先生</p>
                                <p>15047991124</p>
                            </div>
                            <div class="right">
                                <a class="iconfont icon-gengduo1" style="color: white"></a>
                            </div>
                        </section>
                    </section>
                    <ul class="uls">
                        <li>
                            <section class="left">
                                <img src="images/3_2.png">
                            </section>
                            <section class="center">
                                我的认证
                            </section>
                            <section class="right">
                                <i class="iconfont icon-gengduo1" style="color: #000"></i>
                            </section>
                            <a href="html/card.html"></a>
                        </li>
                        <li>
                            <section class="left">
                                <img src="images/3_3.png">
                            </section>
                            <section class="center">
                                我的ETC充值
                            </section>
                            <section class="right">
                                <i class="iconfont icon-gengduo1" style="color: #000"></i>
                            </section>
                            <a href="#"></a>
                        </li>
                        <li>
                            <section class="left">
                                <img src="images/3_4.png">
                            </section>
                            <section class="center">
                                我的活动
                            </section>
                            <section class="right">
                                <i class="iconfont icon-gengduo1" style="color: #000"></i>
                            </section>
                            <a href="html/activity.html"></a>
                        </li>
                    </ul>

                    <ul class="uls">
                        <li>
                            <section class="left">
                                <img src="images/3_5.png">
                            </section>
                            <section class="center">
                                我的钱包
                            </section>
                            <section class="right">
                                <i class="iconfont icon-gengduo1" style="color: #000"></i>
                            </section>
                            <a href="#"></a>
                        </li>
                        <li>
                            <section class="left">
                                <img src="images/3_6.png">
                            </section>
                            <section class="center">
                                积分商城
                            </section>
                            <section class="right">
                                <i class="iconfont icon-gengduo1" style="color: #000"></i>
                            </section>
                            <a href="html/integral.html"></a>
                        </li>
                    </ul>
                    <ul class="uls">
                        <li>
                            <section class="left">
                                <img src="images/3_7.png">
                            </section>
                            <section class="center">
                                邀请好友
                            </section>
                            <section class="right">
                                <i class="iconfont icon-gengduo1" style="color: #000"></i>
                            </section>
                            <a href="html/share.html"></a>
                        </li>
                    </ul>
                    <ul class="uls">
                        <li>
                            <section class="left">
                                <img src="images/3_8.png">
                            </section>
                            <section class="center">
                                更多设置
                            </section>
                            <section class="right">
                                <i class="iconfont icon-gengduo1" style="color: #000"></i>
                            </section>
                            <a href="html/debug.html"></a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <!--<div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>-->
            
            <!-- 如果需要滚动条 -->
            <!--<div class="swiper-scrollbar"></div>-->
        </div>
    <!-- 新品上市 -->
    
    <!-- 当前用户、回顶部 -->
    
    <!-- 底部导航 -->
    <nav class="nav">
        <ul>
            <li class="lis on">
                <a class="iconfont icon-shouye" style="font-size: 26px;"></a>
                <p>首页</p>
            </li>
            <li class="lis">
                <a class="iconfont icon-xiaozhushoumoren" style=" font-size: 26px;"></a>
                <p>助手</p>
            </li>
            <li class="lis">
                <a class="iconfont icon-wode" style="font-size: 26px;"></a>
                <p>我</p>
            </li>
        </ul>
    </nav>
    
    
    <script type="text/javascript" src="assets/iconfont/iconfont.js" ></script>
    <script type="text/javascript" src="assets/swiper/js/swiper.jquery.min.js"></script>
    <script language="javascript"> 
        var mySwiper = new Swiper('.swiper-container', {
            onTransitionEnd: function(swiper){
                $('.lis').eq(mySwiper.activeIndex).addClass('on').siblings().removeClass('on');
            }
        })

        $('.lis').click(function(){
            $(this).addClass('on').siblings().removeClass('on');
            mySwiper.slideTo($(this).index(), 1000);
      
        });
    </script>
</body>
</html>
